doctype html
html(lang="en")

    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/stylesheets/flipclock.css')
        link(rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css")
        link(rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css")

        script(src="//code.jquery.com/jquery-1.11.0.min.js")
        script(src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js")
        script(src="/javascripts/flipclock.min.js")
        script(src="/javascripts/task.js")

        block additional_scripts

    body
            
        div.navbar.navbar-default.navbar-fixed-top(role="navigation")
            div.container
                div.navbar-header
                    button.navbar-toggle(type="button" data-toggle="collapse" data-target=".navbar-collapse")
                        span.sr-only 'Toggle navigation'
                        span.icon-bar
                        span.icon-bar
                        span.icon-bar
                    a.navbar-brand(href="#")= project_name
                div.collapse.navbar-collapse
                    ul.nav.navbar-nav
                        li
                            a(href="/Periodicals") Periodicals
                        li
                            a(href="/Roles") Roles
                        li
                            a(href="/Persons") Persons
                        if auth.bool
                            li
                                a(href="/Timer/get") Report
                    if !auth.bool
                        ul.nav.navbar-nav.navbar-right: li: a(href="/auth") Sign In with Google
                    else
                        form.navbar-form.navbar-left(role="search" method="post" action='/Search/')
                            div.form-group
                                input.form-control(type="text" placeholder="keywords" name="query") 
                                div.btn-group
                                    button.btn.btn-default(type="submit" name="type_of_search" value="0") Search
                                    button.btn.btn-default.dropdown-toggle(type="button" data-toggle="dropdown")
                                        span.caret
                                        span.sr-only Toggle Dropdown
                                    ul.dropdown-menu(role="menu")
                                        li
                                            button.btn.btn-link(type="submit" name="type_of_search" value="1") Levenshtein Search
                                        li
                                            button.btn.btn-link(type="submit" name="type_of_search" value="2") Jaro-Winkler Search
                                        li
                                            button.btn.btn-link(type="submit" name="type_of_search" value="3") Damerau-Levenshtein Search
                        p.navbar-text.navbar-right Hi, #{auth.name}
        if (successAlerts && infoAlerts && warningAlerts && dangerAlerts)
            div
                each msg in successAlerts
                    div.alert.alert-success= msg
                each msg in infoAlerts
                    div.alert.alert-info= msg
                each msg in warningAlerts
                    div.alert.alert-warning= msg
                each msg in dangerAlerts
                    div.alert.alert-danger= msg

        div.container
            block content


        if auth.bool
            div.clock(style='zoom: 0.6; margin-left: auto; margin-right: auto; width: 460px; margin-top: 30px')
            script var timer_init_val = #{timer_init_val}
            script.
                var clock = $('.clock').FlipClock(0);
                clock.setTime(timer_init_val);
                window.onbeforeunload = function() {
                    console.log('jui');
                    
                    var result = {
                        time: clock.getTime().time - timer_init_val, 
                        url: window.location.pathname
                    }
                    $.ajax({
                        type: "POST",
                        url: "/Timer/add",
                        async: false,
                        data: result,
                    })

                    return null;
                }